.racer {
  &__countdown {
    @extend %box-radius, %popup-shadow, %flex-center-nowrap;
    background: $c-bg-zebra;
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em 3em;

    &__lights {
      display: flex;
      flex-flow: column;
      background-color: #3a3a3a;
      width: 60px;
      height: 160px;
      border-radius: 15px;
      margin-right: 2em;

      light {
        width: 40px;
        height: 40px;
        margin-top: 10px;
        margin-left: 10px;
        vertical-align: middle;
        border-radius: 100%;
        display: block;
        opacity: 0.3;
        transition: all 1s;
        &.active {
          opacity: 1;
        }
        &.red {
          background: $c-red;
          &.active {
            box-shadow: 0 0 2em $c-red, 0 0 4em $c-red;
          }
        }
        &.orange {
          background: $c-brag;
          &.active {
            box-shadow: 0 0 2em $c-brag, 0 0 4em $c-brag;
          }
        }
        &.green {
          background: $c-good;
          &.active {
            box-shadow: 0 0 2em $c-good, 0 0 4em $c-good;
          }
        }
      }
    }

    &__seconds {
      @extend %flex-center;
      font-family: 'storm';
      font-size: 8em;
      color: $c-font;
      margin-bottom: -0.23em;
    }
  }
}
